import Component from '@teld/q-components/CircularProgress';
import useMappingProps from 't/common/hooks/useMappingProps';
import {
  commonProps,
  fixNameSpace,
  pickOwnForBasicComponent,
} from 't/common/utils';
import { defineComponent, onMounted, ref, watch } from 'vue';
import styles from './index.module.scss';
import './index.scss';

export default defineComponent({
  name: fixNameSpace(Component.name),
  props: {
    ...commonProps,
    ...Component.props,
    pivotText: {
      type: String,
      default() {
        return '';
      },
    },
  },
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    const refComponent = ref();
    const [mappingProps, mappingExpose] = useMappingProps(props);
    const { default: defaultSlot } = slots;
    expose(mappingExpose);
    const color = getComputedStyle(document.documentElement).getPropertyValue(
      '--t-color',
    );
    mappingProps.color = mappingProps.color ? mappingProps.color : color;
    watch(
      () => mappingProps.color,
      (newVal, oldVal) => {
        mappingProps.color = mappingProps.color ? mappingProps.color : color;
      },
    );

    onMounted(() => {});

    function onClickHandler(params) {}

    return () => {
      return (
        <Component
          ref={refComponent}
          {...attrs}
          {...pickOwnForBasicComponent(mappingProps, Component.props, attrs)}
          class={['t-circular-progress', styles.module]}
          v-show={mappingProps.visible}
          onClick={onClickHandler}
          color={mappingProps.color}
          // v-slots={{ ...slots }}
        >
          {defaultSlot
            ? defaultSlot()
            : mappingProps.value + mappingProps.pivotText}
        </Component>
      );
    };
  },
});
